<template name="trailerStars">
<view class=" movie-score-wapper">
						<!-- <image src="../../static/icos/star-yellow.png" class="star-ico"></image> -->
<!-- 						<image src="../../static/icos/star-yellow.png" class="star-ico"></image>
						<image src="../../static/icos/star-yellow.png" class="star-ico"></image>
						<image src="../../static/icos/star-yellow.png" class="star-ico"></image>
						<image src="../../static/icos/star-gray.png" class="star-ico"></image>
							<view class="movie-score">
					</view> -->
	<image
	v-for="yellow in yelloScore"
		src="../../static/icos/star-yellow.png"
		 class="star-ico"></image>				
	<image
	v-for="gary in garyScore"
	 src="../../static/icos/star-gray.png" class="star-ico"></image>
	 <view class="movie-score" v-if= "showNum== 1">
	 {{innerScore}}
	</view>
	</view>

</template>

<script>
	export default {
		name:"trailerStars",
		data() {
			return {
				yelloScore: 0,
				garyScore: 5
			};
		},
		props: {
			innerScore: 0,
			showNum:0
		},
		created() {
			
			var tempScore = 0;
			if(this.innerScore != null && this.innerScore != undefined && this.innerScore != '') {
				tempScore = this.innerScore;
			}
			
			var yelloScore = parseInt(tempScore / 2);
			var garyScore = 5 - yelloScore;
			
			this.yelloScore = yelloScore;
			this.garyScore = garyScore;
		}
	}

</script>

<style>
	.movie-score-wapper {
		display: flex;
		flex-direction: row;
	}
	.movie-score {
		font-size: 12upx;
		color: gray;
		margin-left: 8upx;
	}
	.star-ico {
		width: 20upx;
		height: 20upx;
		margin-top: 6upx;
	}
</style>
